<template>
    <div class="app-container">
        <h2>座位管理--{{ hallName }}--{{ rowsSeatCount }}排{{ colsSeatCount }}列</h2>
        <!-- <el-alert :title="座位管理说明" type="info" close-text="关闭" description=""></el-alert> -->
        <el-button type="primary" @click="saveSeat">保存</el-button>
        <el-button type="success" @click="showData">返回</el-button>
        <el-button type="success" icon="el-icon-plus" @click="addColumns" plain>添加列座位</el-button>
        <el-button type="warning" icon="el-icon-minus" @click="removeColumns" plain>删除列座位</el-button>
        <!-- <el-scrollbar> -->
        <br>

        <div style="margin-top: 10px;">
            <el-button type="text" style="padding: 0;"><svg-icon icon-class="可选座位"
                    style="width:50px;height: 50px"></svg-icon>可选座位</el-button>

            <el-button type="text" style="padding: 0;"><svg-icon icon-class="已选座位"
                    style="width:50px;height: 50px"></svg-icon>已选座位</el-button>

            <el-button disabled type="text" style="padding: 0;"><svg-icon icon-class="空座位"
                    style="width:50px;height: 50px"></svg-icon>空座位</el-button>
        </div>

        <div v-for="(i, indexi) in seatList" :value="seatList" class="box">
            <div v-if="i != 1">
                <br><br><br>
            </div>
            <el-button type="success" icon="el-icon-plus" plain circle style="margin-top: 8px;float: left;"
                @click="addRows(indexi, i)"></el-button>
            <el-button type="warning" icon="el-icon-minus" plain circle style="margin-top: 8px;float: left;"
                @click="removeRows(indexi, i)"></el-button>


            <i style="float: left;margin-top: 17px;margin-left: 10px;">第{{ indexi + 1 }}排</i>

            <div v-for="(j, indexj) in i" style="width: auto;float: left;">
                <el-tooltip class="item" effect="dark" :content="(indexi + 1) + '排' + (j.seeY) + '座'" placement="top">
                    <el-button v-if="j.status == 1" @click="changeSeatStatus(indexi, indexj, i)" type="text"
                        style="padding: 0;float: left;"><svg-icon icon-class="可选座位"
                            style="width:50px;height: 50px"></svg-icon></el-button>

                    <el-button v-if="j.status == 0" @click="changeSeatStatus(indexi, indexj, i)" type="text"
                        style="padding: 0;float: left;"><svg-icon icon-class="已选座位"
                            style="width:50px;height: 50px"></svg-icon></el-button>

                    <el-button disabled v-if="j.status == 3" type="text" style="padding: 0;float: left;"><svg-icon
                            icon-class="空座位" style="width:50px;height: 50px"></svg-icon></el-button>
                </el-tooltip>
            </div>
            <el-button plain circle style="margin-top: 8px;float: left;margin-left: 7px;"
                @click="addEmpty(indexi, i)">空</el-button>

        </div>
        <!-- </el-scrollbar> -->
    </div>
</template>
    
<script>
import { getSeatList, saveSeat } from '@/api/seat'
import { getToken } from '@/utils/auth'
export default {

    data() {
        return {
            hallName: this.$route.query.hallName,
            hallId: this.$route.query.hallId,
            seatList: [],
            temporarySeatList: [],
            rowsSeatCount: '',
            colsSeatCount: '',
        }
    },
    methods: {
        getSeatList() {
            this.loading++
            getSeatList(this.hallId, getToken()).then(res => {
                console.log("getSeatList" + res)
                if (res.result=='') {
                    this.$message.info("该影厅暂无座位")
                    this.rowsSeatCount = 0,
                    this.colsSeatCount = 0
                    return
                }
                this.seatList = res.result,
                    this.rowsSeatCount = res.result.length,
                    this.colsSeatCount = res.result[0].length
                console.log(this.seatList)
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        showData() {
            // console.log(this.seatList)
            // for (var i = 0; i < this.seatList.length; i++) {
            //     for (var j = 0; j < this.seatList[i].length; j++) {
            //         console.log("第" + i + "行" + "第" + j + "列数据是" + this.seatList[i][j])
            //     }
            // }
            this.$router.go(-1)

        },
        changeSeatStatus(indexi, indexj, i) {
            this.$confirm(this.seatList[indexi][indexj].status ? '此操作将锁定座位，是否继续?' : '此操作将解锁座位，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log("选择位置是" + (indexi + 1) + (indexj + 1))
                if (this.seatList[indexi][indexj].status == 1) {
                    this.seatList[indexi][indexj].status = 0
                    this.$set(i, indexj, this.seatList[indexi][indexj])
                } else {
                    this.seatList[indexi][indexj].status = 1
                    this.$set(i, indexj, this.seatList[indexi][indexj])
                }
                this.$message({
                    type: 'success',
                    message: '改变成功!'

                });
                // this.$router.go(0)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addColumns() {
            this.seatList.push([])
        },
        addRows(indexi, i) {
            var realCols = 0

            for (var z = 0; z < i.length; z++) {
                if (i[z].status != 3)
                    realCols++
            }
            console.log(realCols)
            if (this.seatList[indexi].length == 21) {
                this.$message({
                    message: '当前排座位数已达上限',
                    type: 'warning'
                })
            } else {
                // this.seatList[indexi].push([{createBy: null, createTime: null, updateBy: null, updateTime: null, delFlag: 0, id: "1", seatX: 1, status: 1}])

                if (i.length != 0) {
                    this.$set(i, i.length, { id: "", seatX: indexi + 1, seatY: i.length + 1, status: 1, seeY: realCols + 1, movieHallId: this.hallId })
                }
                else {
                    this.$set(i, i.length, { id: "", seatX: indexi + 1, seatY: i.length + 1, status: 1, seeY: 1, movieHallId: this.hallId })
                }
            }
        },
        removeColumns() {
            for (var i = 0; i < this.seatList.length - 1; i++) {
                this.temporarySeatList[i] = this.seatList[i]
            }
            this.seatList = this.temporarySeatList
            this.temporarySeatList = []
        },
        removeRows(indexi, i) {
            // if (this.seatList[indexi].length == 1) {
            //     this.$message({
            //         message: '当前排座位数不能小于1',
            //         type: 'warning'
            //     });
            // } else {
            this.seatList[indexi].splice(this.seatList[indexi].indexOf(this.seatList[indexi].length - 1), 1)
            // }
        },
        addEmpty(indexi, i) {
            if (this.seatList[indexi].length == 21) {
                this.$message({
                    message: '当前排座位数已达上限',
                    type: 'warning'
                })
            } else {
                // this.seatList[indexi].push([{createBy: null, createTime: null, updateBy: null, updateTime: null, delFlag: 0, id: "1", seatX: 1, status: 1}])
                this.$set(i, i.length, { id: "", seatX: indexi + 1, seatY: i.length + 1, status: 3, seeY: 999, movieHallId: this.hallId })
            }
        },
        saveSeat() {
            saveSeat(this.seatList, getToken()).then(res => {
                this.$message.success(res.message)
                if (res.code == 10000) {
                    this.getSeatList()
                }
            }).catch(e => console.log(e)).finally(() => this.loading--)

        }
    },
    watch: {

    },
    mounted() {
        this.getSeatList()
    }
};
</script>
    
<style>
.box {
    width: 2750px;
    height: auto;
    white-space: nowrap;
}

.el-scrollbar {
    height: 100%;
}

.box .el-scrollbar__wrap {
    overflow: scroll;
    width: 110%;
    height: 120%;
}
</style>